import React from 'react';
import { DropdownButton, MenuItem } from 'react-bootstrap';
import weAjax from '../utils/ajax';

// const api = 'http://bm.juzhen.net/register';

class UserCreation extends React.Component {
    constructor(props) {
        super(props);
        this.handleChange1 = this.handleChange1.bind(this);
        this.handleChange2 = this.handleChange2.bind(this);
        this.handleChange3 = this.handleChange3.bind(this);
        this.dropBtnClick = this.dropBtnClick.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
        this.state = {
            id: '',
            userpw: '',
            usertype: '1',
            nickname: '',
            isLogin: false,
            dropbtnTitle: '程序工程师'
        };

    }

    register() {
        weAjax({ url: this.props.api, method: 'post' }, {
            id: this.state.userid,
            userpw: this.state.userpw,
            usertype: this.state.usertype,
            nickname: this.state.nickname
        }, (data) => {
            alert("注册成功");
        })
    }

    onSubmit(e) {
        e.preventDefault();
        this.register();
    }

    handleChange1(e) {
        this.setState({ userid: e.target.value });
    }

    handleChange2(e) {
        this.setState({ userpw: e.target.value });
    }

    handleChange3(e) {
        this.setState({ nickname: e.target.value });
    }

    dropBtnClick(e, obj) {
        if (e === '1') {
            this.setState({ dropbtnTitle: obj.target.text, usertype: 0 });
        } else if (e === '2') {
            this.setState({ dropbtnTitle: obj.target.text, usertype: 1 });
        } else if (e === '3') {
            this.setState({ dropbtnTitle: obj.target.text, usertype: 2 });
        }

    }
    render() {
        const userid = this.state.userid;
        const userpw = this.state.userpw;
        const nickname = this.state.nickname;
        return (
            <div>
                <div className="form-form" >
                    <div className="form-title">{this.props.name}</div>
                    <input className="form-input" value={userid} onChange={this.handleChange1} placeholder="用户名" />
                    <input className="form-input" value={userpw} onChange={this.handleChange2} placeholder="密码" />
                    <input className="form-input" value={nickname} onChange={this.handleChange3} placeholder="用户昵称" />

                    <DropdownButton bsStyle='default' title={this.state.dropbtnTitle} onSelect={this.dropBtnClick} className='ddb' id='db'>
                        <MenuItem eventKey="1">超级管理员</MenuItem>
                        <MenuItem eventKey="2">程序工程师</MenuItem>
                        <MenuItem eventKey="3">策划师</MenuItem>
                    </DropdownButton>
                    <button onClick={this.onSubmit} className='form-button'>注 册</button>
                </div>
            </div>
        );
    }
}

export default UserCreation;